 @import "compass";
 @import "compass/css3";
 @import "variables";
 @import "btnStyle";
 //@import "compass/reset";

 /* 云服务器购买页面 */
.server-pay {
  font-size: 14px;
  width: 100%;
  margin-top: 30px;
  .product-list {
    width: 880px;
    float: left;
    &.fluid {
      width: 1200px;
    }
    .basic-block {
      .basic-table {
        width: 100%;
        background: $light-gray;
        tbody {
          tr {
            td {
              &.name {
                width: 40px;
                background: $dark-gray;
              }
              &.value {
                padding: 40px;
              }
              .basic-block-title {
                width: 10px;
                padding: 20px 0;
                margin: 0 15px;
                color: $color6;
                word-break: break-all;
              }
            }
          }
        }
      }
    }
    .basic-setting {
      width: 100%;
      margin-bottom: 20px;
    }
    .basic-sum {
      width: 100%;
    }
    //价格总计
    .product-total {
      padding: 20px 40px;

      span {
        display: inline-block;
        line-height: 40px;
      }

      .big-orange-txt {
        font-size: 20px;
        font-weight: 700;
      }
      del {
        color: $color9;
        margin-left: 10px;
      }
    }
    .table-line-list {
      @at-root {
        .table-line {
          padding-bottom: 20px;
          color: $color6;

          &:last-child {
            padding-bottom: 0;
          }

          &-left {
            font-size: 12px;
            width: 80px;
            line-height: 28px;
            display: inline-block;
            color: $color3;
            vertical-align: top;
          }
          &-right {
            width: 84%;
            display: inline-block;
            vertical-align: top;
            span,a {
              display: inline-block;
              vertical-align: top;
              font-size: 12px;
              line-height: 28px;
            }
            .txt-select {
              font-size: 12px;
              width: 70px;
              height: 30px;
              margin: 0 10px;
            }
            .txt-input {
              font-size: 12px;
              width: 200px;
              height: 30px;
              padding: 8px;
              margin: 0 10px;
            }
            .desc {
              width: 50%;
            }

            table {
              tbody {
                tr {
                  &.td-list {
                    td {
                      cursor: pointer;
                      &.active,&:hover {
                        background: $light-blue !important;
                        color: #fff;
                      }
                    }
                  }
                }
              }
            }
            .spinnerDemo,.spinnerDemo1,.spinnerDemo2,.spinnerDemo3 {
              display: inline-block;
            }
            //.control-input {
            //  display: inline-block;
            //  position: relative;
            //  height: 28px;
            //  margin: 0 0 1px 0;
            //  vertical-align: top;
            //
            //  .number-input {
            //    float: left;
            //    display: inline;
            //    height: 28px;
            //    width: 60px;
            //    padding: 5px 10px 5px 3px;
            //    margin-right: 1px;
            //    border: solid 1px #e8e8e8;
            //    text-align: center;
            //    line-height: 16px;
            //    color: #333;
            //    font-size: 12px;
            //  }
            //  .number-control {
            //
            //    float: left;
            //    display: inline;
            //    width: 22px;
            //    height: 28px;
            //    background: #e8e8e8;
            //
            //    .number-up,.number-down {
            //      display: block;
            //      height: 14px;
            //      background: #e8e8e8;
            //      overflow: hidden;
            //      cursor: pointer;
            //      .number-arrow {
            //        display: block;
            //        width: 0;
            //        height: 0;
            //        border: solid 5px transparent;
            //        margin: 2px 6px 3px;
            //        cursor: pointer;
            //      }
            //    }
            //    .dn {  display: none;}
            //    .number-up {
            //      .number-arrow {
            //        border-top-color: #999;
            //      }
            //
            //      &.number-disabled {
            //        .number-arrow {
            //          border-top-color: #b9b9b9;
            //        }
            //      }
            //    }
            //    .number-down {
            //      .number-arrow {
            //        border-bottom-color: #999;
            //      }
            //      &.number-disabled {
            //        .number-arrow {
            //          border-bottom-color: #b9b9b9;
            //        }
            //      }
            //    }
            //  }
            //}
          }
        }

      }
      table {
        tbody {
          tr {
            td {
              min-width: 100px;
              height: 60px;
              padding: 5px 10px;
              line-height: 20px;
              font-size: 12px;
              border: 1px solid $global-border;
              background: $dark-gray;
            }
          }
        }
      }
      .tip {
        font-size: 12px;
        padding-left: 80px;
        color: $color9;
        line-height: 24px;
      }
    }

    /*用户评分*/
    .User_ratings {
      .ratings_bars {
        #title0 {
          width:25px;
          height:25px;
          text-align:center;
          border:1px solid #ddd;
          line-height: 24px;
          font-size: 12px;
          float:left;
          color: $color6;
          //margin-left:5px;
          background:#fff;
        }
        .bars_10 {
          font-size:12px;
          line-height:24px;
          padding: 0 10px 0 0;
          float:left;
          color: $color6;
        }

        .scale {
          width: 512px;
          height: 24px;
          float:left;
          position:relative;
          background: #E8E8E8;

          .overLine {
            width:10px;
            position:absolute;
            left:0;
            height:24px;
            bottom: 0;
            background: $light-blue;
          }

          span {
            width: 15px;
            height: 30px;
            position:absolute;
            left: 6px;
            top:-3px;
            z-index: 99;
            background: darken($light-blue,10%);
            cursor:pointer;

            &:before,&:after {
              position: absolute;
              content: '';
              display: inline-block;
              width: 2px;
              height: 20px;
              background: $light-blue;
              top: 5px;
            }

            &:before {
              left: 3px;
            }
            &:after {
              right: 3px;
            }
          }
        }
      }
    }
  }
  .order-list {
    width: 320px;
    padding-left: 20px;
    float: right;

    .current-setting {
      padding: 0 10px 20px;
      border:1px solid $global-border;

      &-title {
        font-weight: 500;
        line-height: 1.5;
        padding: 10px;
        border-bottom: 1px solid $global-border;
      }
      .setting-line-list {
        width: 100%;
        margin: 10px 0 25px 0;
        font-size: 12px;

        .setting-line {
          line-height: 2.4;
          color: $color6;
          overflow: hidden;

          &-left {
            display: inline-block;
            width: 75px;
            padding-right: 5px;
            text-align: right;
          }
          &-right {
            display: inline-block;
          }
        }

      }

      &-total {
        color: $color6;
        margin-bottom: 20px;

        label,del {
          font-size: 12px;
          line-height: 20px;
        }
        .num {
          width: 90px;
          @include ellipsis();
        }
        del {
          width: 80px;
          font-size: 12px;
          color: $color9;
          @include ellipsis();
        }
        .txt-blue {
          width: 45px;
          font-size: 12px;
          @include ellipsis();
        }
      }
    }

  }
}

 /* CA证书购买样式 */
 .product-ca {
   background-position: 50% 0;
   background-repeat: no-repeat;
   background-size: 1400px;
   background-image: url(//img.alicdn.com/tps/TB1sfvIMXXXXXcgXXXXXXXXXXXX-2800-1100.jpg);

   .introduce {
     padding-top: 40px;
     .title {
       font-size: 50px;
       color: $color3;
       line-height: 1.1;
       .icon {
         display: inline-block;
         width: 60px;
         height: 60px;
         margin-right: 10px;
         background-repeat: no-repeat;
         background-position: center;
         background-size: cover;
         vertical-align: top;

         &-ca {
           background-image: url(../images/IDC/icon-ca.png);
         }
       }
     }

     .intro {
       font-size: 14px;
       width: 700px;
       line-height: 24px;
       margin-top: 20px;
       color: $color6;
     }

     .btn-wrap {
       margin: 40px 0;
       .common-btn {
         display: inline-block;
       }
     }
   }
   /* 浮动的bar */
   .float-box {
     width: 100%;
     text-align: center;
     display: inline-block;
     &.fixed {
       position: fixed;
       top: 0;
       left: 0;
       z-index: 2;
       background: #fff;
     }
     .product-list {
       text-align: center;
       //margin-bottom: 10px;
       border-bottom: 1px solid $global-border;
       li {
         display: inline-block;
         margin: 0 20px;
         padding: 0 10px;
         border-bottom: 2px solid transparent;
         a {
           display: block;
           line-height: 48px;
           color: $color6;
         }
         &:hover,&.active {
           border-color: $text-blue;
         }
       }
     }
   }
   .product-desc {
     h4 {
       font-weight: 700;
     }
     table {
       width: 100%;
       margin-top: 36px;
       border: 1px solid $global-border;
       color: #333;
       tbody {
         tr {
           td {
             border-left: 1px solid #f0f0f0;
             border-top: 1px solid #f0f0f0;
             padding: 22px;
             position: relative;
             line-height: 24px;
             font-size: 14px;
             color: #333;
             h3 {
               font-weight: 700;
               font-size: 16px;
               img {
                 width: 16px;
                 position: relative;
                 vertical-align: -3px;
                 margin-right: 10px;
               }
             }
           }
         }
       }
     }
   }
   .product-cooperate {
     padding: 40px 0 20px;
     h4 {
       font-size: 16px;
       color: $color6;
     }
     .cooperate-list {
       padding-top: 30px;
       width: 100%;
       &-item {
         width: 50%;
         float: left;
         dt {
           width: 70px;
           height: 70px;
           float: left;
         }
         dd {
           width: 530px;
           padding: 0 40px;
           float: left;
           h3 {
             color: $color3;
           }
           p {
             font-size: 12px;
             line-height: 20px;
             color: $color9;
           }
         }
       }
     }


   }

   .func-table {
     margin: 20px 0;
     tbody {
       tr {
         td {
           &.func-title {
             width: 18px;
             text-align: center;
             background: #f5f5f5;
             color: #999;
             font-size: 14px;
             padding: 12px;
           }
           &.func-bd {
             padding: 0 24px;
             &:first-child {
               margin-top: 0;
             }
             .func-module {
               font-size: 14px;
               color: #666;
               line-height: 28px;
               h3 {
                 font-size: 16px;
                 color: #333;
                 font-weight: 700;
                 margin-bottom: 10px;
               }
             }
           }
         }
       }
     }
   }
   .docs-list {
     margin: 30px 0 50px;
     li {
       width: 25%;
       float: left;
       .li-inner {
         padding-right: 10px;
         line-height: 28px;

         .usercase-tab {
           font-size: 16px;
           color: #333;
           font-weight: 700;
           margin-bottom: 8px;
         }
         a {
           font-family: "宋体";
           display: block;
           font-size: 14px;
           color: #666;
         }
       }
     }
   }
 }
 .alert-server-con {
   padding: 40px 0;
   background: $light-gray;
 }

 /* 云服务器滑块样式 */
  .jq-slider{
     width: 310px;
     position:relative;
     height:30px;
     display: inline-block;
     vertical-align: top;
   }
 //弹窗的按钮样式
 .alert-choose-line {
   font-size: 0;

   .choose-line-left {
     width: 15%;
     font-size: 12px;
     color: $color6;
     display: inline-block;
     vertical-align: middle;
     text-align: right;
     padding-right: 20px;

   }
   .choose-line-right {
     width: 85%;
     display: inline-block;
     vertical-align: middle;
   }
 }
 .choose-num {
   width: 100%;
   font-size: 0;

   li {
     display: inline-block;
     font-size: 12px;
     width: 120px;
     line-height: 28px;
     text-align: center;
     color: #666;
     margin-right: 1px;
     margin-top: 1px;
     background: #f2f2f2;
     transition: all .3s ease;
     cursor: pointer;

     &:hover,&.active {
       background: #43bfe3;
       color: #fff;
     }
   }
 }


